﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Wedqianduan.aspx.cs" Inherits="MiaoWeiProject.liuyong.Wedqianduan" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Wed前端高级工程师</title>
    <style type="text/css">
        body {
            background: url("lyimages/bg.png") repeat-x #ee7063;
            color: #333;
        }

        * {
            padding: 0px;
            margin: 0px;
            font-size: 14px;
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
        /*头部样式*/
        #heard {
            width: 100%;
            height: 70px;
            background: url('/images/nav-bg.png') repeat-x left top;
            display: flex;
        }

        #heard_conet {
            height: 50px;
            margin: 10px auto;
            width: 75%;
            display: flex;
            justify-content: space-between;
        }

        #conter_left {
            width: 275px;
            height: 50px;
            background: url('/images/nav-logo-2019-0826.png') no-repeat left center;
        }

        #conter_zhong {
            width: 60%;
            height: 50px;
        }

            #conter_zhong ul {
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_zhong ul li {
                    text-align: center;
                    height: 50px;
                    line-height: 50px;
                }

                    #conter_zhong ul li a {
                        padding: 7px 27px;
                        color: #666;
                        font-size: 1.2em;
                        border-radius: 18px;
                    }

                    #conter_zhong ul li i.nav-new {
                        display: inline-block;
                        width: 39px;
                        height: 20px;
                        background: url('/images/nav-new.png') no-repeat left top;
                        vertical-align: middle;
                        margin-left: 4px;
                    }
        /*悬浮导航样式*/
        /*#conter_zhong ul li a:*/ .hover {
            color: #f70;
            background-color: #e0dce4;
            box-shadow: 2px 2px 1px #c5c0cc inset;
        }

        #conter_right {
            width: 8%;
            height: 50px;
        }

            #conter_right ul {
                height: 50px;
                line-height: 50px;
                display: flex;
                justify-content: space-between;
                overflow: hidden;
            }

                #conter_right ul li {
                    text-align: center;
                }

                    #conter_right ul li a {
                        font-size: 1.1em;
                        color: #666;
                    }

                        #conter_right ul li a:hover {
                            color: #f70;
                        }
        /*点击导航样式*/
        .yangshi {
            color: #fff;
            background-color: #e75c77;
            box-shadow: 2px 2px 1px #c42f4c inset;
        }
        /*中间内容*/
        /*第一个*/
        .first {
            height: 826px;
            background: url("lyimages/bg_1.png") no-repeat center -72px;
        }

        .first_box {
            width: 1040px;
            margin: 0 auto;
            position: relative;
        }

        .first h1 {
            padding-top: 140px;
        }

        .first h1, .first p {
            text-align: center;
        }
        /*第二个*/
        .second {
            height: 444px;
            padding-top: 102px;
            background: url("lyimages/bg_2.png") no-repeat center center;
            position: relative;
        }

        #callQQ2 {
            width: 442px;
            height: 160px;
            background: url("lyimages/sub_btn.png");
            position: absolute;
            left: 50%;
            margin-left: -214px;
            top: -130px;
        }

        .second img {
            display: block;
            margin: 0 auto;
        }
        /*第三个*/
        .third {
            background: url("lyimages/bg_3.png") no-repeat center 0;
            height: 756px;
        }

            .third h2 {
                padding: 80px 0 58px;
            }

            .third ul {
                width: 1040px;
                margin: 0px auto;
                transform-style: preserve-3d;
                perspective: 800px;
            }

            .third li {
                float: left;
                margin: 5px;
                width: 250px;
                height: 196px;
                transition: .6s;
                cursor: pointer;
                position: relative;
            }

                .third li img {
                    width: 100%;
                    height: 100%;
                    border-radius: 5px;
                    display: block;
                    margin: 0 auto;
                }

        /*第四个*/
        .four {
            text-align: left;
            position: relative;
            padding-bottom: 104px;
        }

        .four_bg1 {
            height: 592px;
            background: url("lyimages/bg_4.png") no-repeat center;
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
            z-index: -1;
        }

        .four_bg2 {
            height: 367px;
            background: url("lyimages/bg_6.png") no-repeat center 0;
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;
            z-index: -1;
        }

        .four h2 {
            padding-top: 80px;
        }

            .four h2 img {
                display: block;
                margin: 0 auto;
            }

        .classList_box {
            width: 100%;
            background: url("lyimages/bg_5.png") repeat-y center;
        }

        .classList {
            width: 1040px;
            margin: 60px auto;
        }

            .classList h3 {
                color: white;
                margin: 34px 0 14px;
            }

            .classList ol > li {
                margin-bottom: 10px;
                font-size: 14px;
                line-height: 24px;
                font-family: '微软雅黑';
            }

            .classList h4 {
                height: 48px;
                color: #ffb6ac;
                border: 2px solid #ffe0d9;
                border-radius: 4px;
                line-height: 48px;
                cursor: pointer;
            }

            .classList i {
                width: 48px;
                height: 48px;
                background: #f7c6c1;
                display: inline-block;
                text-align: center;
                color: #fa4e44;
            }

            .classList ol > li:hover i {
                background: #fce0dd;
            }

            .classList ol > li:hover h4 {
                border-color: white;
                color: #000000;
            }

            .classList strong {
                padding-left: 16px;
            }

        .listbtn {
            width: 20px;
            height: 20px;
            font-weight: normal;
            float: right;
            padding-right: 20px;
            margin-top: 14px;
        }

        .jia {
            background: url("lyimages/open1.png") no-repeat;
        }

        .jian {
            background: url("lyimages/close.png") no-repeat;
        }

        i, em {
            font-style: normal;
        }

        .classList ul {
            border-radius: 4px;
            box-shadow: 0px 20px 40px inset #f6958e;
            background: #fce2e1;
            margin-top: 2px;
            padding: 20px;
            display: none;
        }

        .ku {
            border-color: #FFF;
            background: #FFF;
            color: #ea563a;
            position: relative;
        }

        .classList ul li {
            background: url("lyimages/icon1.png") no-repeat 0 center;
            padding-left: 20px;
        }
        /*第五个*/
        .five {
            background: url("lyimages/bg_7.png") no-repeat center center;
            height: 597px;
        }

        .five_box {
            width: 1040px;
            margin: 0 auto;
            position: relative;
        }

        .subbtn {
            width: 440px;
            height: 134px;
            background: url("lyimages/btn.png");
            position: absolute;
            top: -102px;
            left: 50%;
            margin-left: -220px;
        }

        .five_box h3 {
            padding-top: 98px;
        }

            .five_box h3 img {
                display: block;
                margin: 0 auto;
            }

        .five_box_ul {
            padding-left: 60px;
            padding-top: 10px;
        }

        .five ul li {
            float: left;
            margin: 30px;
        }
        /*第六个*/
        .six {
            height: 855px;
            background: url("lyimages/bg_7_2.png") no-repeat center 0;
        }

        .six_box {
            width: 1040px;
            margin: 0 auto;
            position: relative;
        }

        .six h3 {
            padding: 80px 0 0;
        }

            .six h3 img {
                display: block;
                margin: 0 auto;
            }

        .answerbox {
            width: 400px;
            margin: 0 auto;
            overflow: hidden;
            margin: 85px auto 0;
            height: 495px;
            position: relative;
            z-index: 1;
        }

        .swiper-slide {
            height: auto;
            padding-top: 4px;
            flex-shrink: 0;
            width: 100%;
            height: 100%;
            position: relative;
        }

        .answerbox h4 {
            font-size: 18px;
            color: #FFF;
            padding-bottom: 12px;
            line-height: 18px;
        }

            .answerbox h4 em {
                padding-right: 16px;
                font-size: 30px;
                font-style: italic;
            }

        .answerbox p {
            background: #FFF;
            border-radius: 10px;
            padding: 10px;
            line-height: 22px;
            font-size: 14px;
            margin-bottom: 24px;
            position: relative;
        }
        /*第七个*/
        .seven {
            background: url("lyimages/bg_8.png") no-repeat center 0;
            height: 1666px;
        }

        .seven_box {
            width: 1040px;
            margin: 0 auto;
        }

            .seven_box h3 {
                margin-bottom: 50px;
                padding-top: 75px;
            }

            .seven_box img {
                display: block;
                margin: 0 auto;
            }
        /*尾部样式*/
        #weibu {
            height: 144px;
            width: 100%;
            display: flex;
            background: url("/images/footer-bg.jpg") repeat-x left top;
        }

        #weibu_zhong {
            width: 75%;
            height: 80px;
            margin: 30px auto;
            justify-content: space-between;
            display: flex;
        }

        #weibu_left {
            height: 100%;
            width: 25%;
            border-right: 2px solid #b7b3c1;
        }

        #weibu_right {
            height: 100%;
            width: 65%;
        }

        #weibu_right_top {
            height: 50%;
            width: 100%;
        }

        #weibu_right_down {
            height: 50%;
            width: 100%;
        }

        #weibu_right_top ul {
            display: flex;
            justify-content: space-between;
            overflow: hidden;
        }

            #weibu_right_top ul li {
                height: 35px;
                line-height: 35px;
            }

                #weibu_right_top ul li a {
                    color: #666;
                    font-size: 1.1em;
                }

                    #weibu_right_top ul li a:hover {
                        color: #f70;
                    }

                #weibu_right_top ul li.link-line {
                    color: #666;
                    padding: 0 16px;
                }

        #weibu_right_down p {
            font-size: 1.2em;
            color: #6f7b91;
            height: 35px;
            line-height: 35px;
        }
    </style>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        //头部的
        function Heard() {
            $(".li").hover(function () {
                $(this).addClass("hover");
                $(this).css({ "color": " #f70" });
                //$(this).parent().siblings().children().removeClass("hover");
            }, function () {
                $(this).removeClass("hover");
                $(this).css({ "color": "#666" });
                //$(this).parent().siblings().children().removeClass("hover");
            }
            );
            $(".li").click(function () {
                $(this).addClass("yangshi");
                $(this).css({ "color": "white" });
                $(this).parent().siblings().children().removeClass("yangshi");
            });
        }
        $(function () {
            //头部
            Heard();
            //进入页面时课程选中
            $(".li").eq(1).addClass("yangshi");
            $(".li").eq(1).css({ "color": "white" });
            $(".li").eq(1).parent().siblings().children().removeClass("yangshi");

            //菜单的单击事件
            $(".classList ol>li h4").click(function () {
                $(this).next().stop().slideToggle(2000);
                $(this).children("em.listbtn").toggleClass("jian");
                $(this).toggleClass("ku");
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <%--  头部--%>
        <div id="heard">
            <div id="heard_conet">
                <div id="conter_left"></div>
                <div id="conter_zhong">
                    <ul>
                        <li><a href="#" class="li">首页</a></li>
                        <li><a href="#" class="li">课程</a></li>
                        <li><a href="#" class="li">视频学习</a></li>
                        <li><a href="#" class="li">尊享视频<i class="nav-new"></i></a></li>
                        <li><a href="#" class="li">社区</a></li>
                    </ul>
                </div>
                <div id="conter_right">
                    <ul>
                        <li><a href="#">登录</a></li>
                        <li>|</li>
                        <li><a href="#">注册</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <%-- 中间内容--%>
        <%--第一个--%>
        <div class="first">
            <div class="first_box">
                <h1>
                    <img src="lyimages/title.png" alt="" />
                </h1>
                <p>
                    <img src="lyimages/title2.png" />
                </p>
            </div>
        </div>
        <%--第二个--%>
        <div class="second">
            <a id="callQQ2" href="javascript:;" title="立即报名" class="btn"></a>
            <h2>
                <img src="lyimages/title3.png" alt="" /></h2>
        </div>
        <%--第三个--%>
        <div class="third">
            <h2>
                <img src="lyimages/title4.png" alt="" /></h2>
            <ul class="clearfix" id="works">
                <li><a href="#">
                    <img src="lyimages/pruduct/1.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/2.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/3.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/4.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/5.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/6.jpg" /></a></li>
                <li><a href="#">
                    <img src="lyimages/pruduct/7.jpg" /></a></li>
                <li><a target="_blank" href="#">
                    <img src="lyimages/pruduct/8.jpg" /></a></li>
            </ul>
        </div>
        <%-- 第四个--%>
        <div class="four clearfix">
            <div class="four_bg1"></div>
            <div class="four_bg2"></div>
            <h2>
                <img src="lyimages/title5.png" alt="" />
            </h2>
            <div class="classList_box">
                <div class="classList">
                    <h3>第一阶段</h3>
                    <ol>
                        <li class="one">
                            <h4>
                                <i>1</i>
                                <strong>走入JavaScript的世界（带你见识多彩的JS世界）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-初步认识JavaScript的逻辑 - 咱先聊聊江湖规矩
                                </li>
                                <li>2-JavaScript基础语法学习-亲传闯荡江湖的必会招式
                                </li>
                                <li>3-变量及函数使用
                                </li>
                                <li>4-元素获取及事件绑定
                                </li>
                                <li>5-标识符及标识符的命名规则-老王，你为啥就姓王
                                </li>
                                <li>6-关键字及保留字-啥是佩奇？佩奇是只猪
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>2</i>
                                <strong>玩转属性操作（把元素当魔方玩）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-什么是属性 -你全身都是属性
                                </li>
                                <li>2-ECMAScript 中对属性操作的两种方法
                                </li>
                                <li>3-属性读操作和写操作
                                </li>
                                <li>4-字面量和字符串的区别
                                </li>
                                <li>5-元素常用属性：id、className、style、innerHTML、src、cssText、tagName、value  -元素小朋友的自我介绍
                                </li>
                                <li>6-属性操作时的注意事项及常见问题 -来，老司机带你跳一跳
                                </li>
                                <li>7-案例：揉捏div
                                </li>
                                <li>8-案例：静态留言板实现
                                </li>
                                <li>9-console 和 alert 调试 -日常问题播报员
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>3</i>
                                <strong>if 语句和布尔值（让选择变得更有逻辑）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-if 语句的几种写法 - 征服选择恐惧症
                                </li>
                                <li>2-数据格式之布尔值
                                </li>
                                <li>3-逻辑运算符使用
                                </li>
                                <li>4-比较运算符使用 - 来复习小学数学啦
                                </li>
                                <li>5-初步学习数组
                                </li>
                                <li>6-案例：自定义下拉菜单
                                </li>
                                <li>7-案例：京东幻灯片初实现
                                </li>
                                <li>8-案例：模拟微信对话框
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>4</i>
                                <strong>for 循环和this指向（给你一个亿，你数得过来么）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-前置内容总结
                                </li>
                                <li>2-组成循环的四大要素 - 就是这种数钱的感觉
                                </li>
                                <li>3-for 循环执行顺序
                                </li>
                                <li>4-案例：循环生成拼图
                                </li>
                                <li>5-案例：for 套 for 用 JS 画一张九九乘法表
                                </li>
                                <li>6-函数的 this 指向
                                </li>
                                <li>7-案例：自定义复选控件
                                </li>
                                <li>8-案例：自定义单选控件
                                </li>
                                <li>9-案例：腾讯选项卡实现
                                </li>
                                <li>10-案例：完整版新浪下拉菜单控件
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>5</i>
                                <strong>ECMAScript数据类型及类型转换（生来不是程序猿）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-ECMAScript 数据类型划分
                                </li>
                                <li>2-简单类型：number、string、boolean、null、undefined、symbol
                                </li>
                                <li>3-复杂类型：object
                                </li>
                                <li>4-传值和传址
                                </li>
                                <li>5-typeof 运算符 - 请出示你的上岗证
                                </li>
                                <li>6-NaN 和 isNaN  - 简直就是双重人格
                                </li>
                                <li>7-强制转换为数字：parseInt()、parseFloat()、Number()
                                </li>
                                <li>8-强制转换为字符串：String()
                                </li>
                                <li>9-强制转换为布尔值：Boolean()
                                </li>
                                <li>10-数学运算符的运算规则及相应的隐式类型转换规则
                                </li>
                                <li>11-赋值运算符的运算规则及相应的隐式类型转换规则
                                </li>
                                <li>12-比较运算符符的运算规则及相应的隐式类型转换规则
                                </li>
                                <li>13-逻辑运算符的运算规则及相应的隐式类型转换规则
                                </li>
                                <li>14-三元运算符的运算规则
                                </li>
                                <li>15-案例：数据筛选
                                </li>
                                <li>16-案例：QQ号码验证
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>6</i>
                                <strong>ECMAScript 流程控制 （老程序带你买西瓜）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-程序中的三种基本结构流程
                                </li>
                                <li>2-顺序结构流程
                                </li>
                                <li>3-分支结构流程：if、else if、else、switch、case、break、default
                                </li>
                                <li>4-循环结构流程：for、while、do while、continue
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>7</i>
                                <strong>function 详解（数钱神器）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-函数声明和调用
                                </li>
                                <li>2-函数传参：形参和实参 - 和我说话请投币
                                </li>
                                <li>3-arguments 不定参 - 给你一个随便说的机会
                                </li>
                                <li>4-return 返回值 - 老板说：“我只想听结果”
                                </li>
                                <li>5-熟识 this 指向，call 和 apply，bind
                                </li>
                                <li>6-bind 源码解析
                                </li>
                                <li>7-获取计算后样式 getComputedStyle 和 currentStyle
                                </li>
                                <li>8-var 和 function 的预解析（变量提升）
                                </li>
                                <li>9-作用域、作用域链和闭包 - 城管的执法范围
                                </li>
                                <li>10-案例：百度音乐的全选操作
                                </li>
                                <li>11-案例：商品统计
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>8</i>
                                <strong>定时器和日期对象（如果你有改变时间的能力）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-setTimeout 延迟型定时器 - 床头的小闹钟
                                </li>
                                <li>2-setInterval 间隔型定时器 - 超市门口的小喇叭
                                </li>
                                <li>3-clearTimeout 和 clearInterval
                                </li>
                                <li>4-定时器管理
                                </li>
                                <li>5-案例：来个讨厌的小广告
                                </li>
                                <li>6-案例：站长之家导航
                                </li>
                                <li>7-案例：淘宝自动播放的选项卡
                                </li>
                                <li>8-案例：自动播放的选项卡嵌套
                                </li>
                                <li>9-日期对象
                                </li>
                                <li>10-案例：电子时钟
                                </li>
                                <li>11-案例：倒计时
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>9</i>
                                <strong>数组和字符串方法（超级常用的方法）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-字符串方法
                                </li>
                                <li>2-数组方法
                                </li>
                                <li>3-JSON 和 对象
                                </li>
                                <li>4-常用 Math 方法
                                </li>
                                <li>5-案例：员工信息排序和筛选
                                </li>
                                <li>6-案例：文字筛选和替换
                                </li>
                                <li>7-案例：打字机效果
                                </li>
                                <li>8-案例：伪 3D 图片切换
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>10</i>
                                <strong>排序算法（发家致富小秘籍）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-冒泡算法 - 高个子往后站
                                </li>
                                <li>2-快速排序 - 分而治之
                                </li>
                                <li>3-递归 - 从前有座山,山里有个庙,庙里有个...
                                </li>
                                <li>4-数组去重的 N 种方法
                                </li>
                                <li>5-案例：无限级菜单生成和交互
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>11</i>
                                <strong>动画专题训练（做动画小 case）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-利用CSS3 transition 实现动画
                                </li>
                                <li>2-案例：京东渐隐渐现幻灯片实现
                                </li>
                                <li>3-利用css3 animation 动画
                                </li>
                                <li>4-案例：水滴按钮
                                </li>
                                <li>5-JS 动画帧：requestAnimationFrame、cancelAnimationFrame
                                </li>
                                <li>6-动画帧兼容处理
                                </li>
                                <li>7-Tween 动画公式
                                </li>
                                <li>8-封装基于 Tween 的动画框架
                                </li>
                                <li>9-回调函数初使用
                                </li>
                                <li>10-案例：无缝滚动幻灯片
                                </li>
                                <li>11-案例：韩雪冬官网首页图片切换效果
                                </li>
                                <li>12-案例：妙味导航实现
                                </li>
                                <li>13-封装抖动函数
                                </li>
                                <li>14-案例：倒计时商品下架
                                </li>
                                <li>15-CSS3 transform 详解
                                </li>
                                <li>16-在动画框架中封装 transform 方法
                                </li>
                                <li>17-案例：时钟
                                </li>
                                <li>18-案例：3D 图片轮播效果
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>12</i>
                                <strong>第一阶段实战《win 7 系统日历全实现》</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-日期推导 - 生成日历布局
                                </li>
                                <li>2-上一月下一月无缝滚动实现
                                </li>
                                <li>3-年月日切换动画添加
                                </li>
                                <li>4-电子时钟实现
                                </li>
                            </ul>
                        </li>
                    </ol>
                    <h3>第二阶段</h3>
                    <ol>
                        <li class="one">
                            <h4>
                                <i>13</i>
                                <strong>ECMAScript 6+ 基础（JS的新变革）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-let、const、块级作用域 - 规范路边停车位
                                </li>
                                <li>2-解构赋值 和 展开运算符
                                </li>
                                <li>3-Map 和 Set 数据结构
                                </li>
                                <li>4-箭头函数、rest 参数、参数默认值
                                </li>
                                <li>5-新增数组及字符串方法
                                </li>
                                <li>6-对象新增方法解析
                                </li>
                                <li>7-案例：员工信息列表操作
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>14</i>
                                <strong>异步处理专题</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-同步和异步
                                </li>
                                <li>2-回调地狱
                                </li>
                                <li>3-ES6  Promise 对象详解
                                </li>
                                <li>4-Iterator（遍历器）和 for of 循环
                                </li>
                                <li>5-Generator 函数
                                </li>
                                <li>6-Async 函数 和 await
                                </li>
                                <li>7-案例：基于 Promise 封装的链式动画 - 简版
                                </li>
                                <li>8-案例：基于 Promise 封装的链式动画 - mTween完善 
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>15</i>
                                <strong>DOM详解（页面中的家谱）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-DOM 节点类型
                                </li>
                                <li>2-DOM 树及 DOM 关系
                                </li>
                                <li>3-DOM 中的属性操作
                                </li>
                                <li>4-DOM 节点操作：增、删、改、查
                                </li>
                                <li>5-DOM 元素尺寸及位置获取：offset…、 client…、scroll…、getBoundingClientRect
                                </li>
                                <li>6-案例：学生管理系统
                                </li>
                                <li>7-案例：动态文件夹创建
                                </li>
                                <li>8-案例：上移下移
                                </li>
                            </ul>
                        </li>

                        <li class="one">
                            <h4>
                                <i>16</i>
                                <strong>BOM （玩浏览器的正确方式）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-window对象相关操作：innerWidth/innerHeight、close、open …
                                </li>
                                <li>2-location 对象相关操作：hash、href、search、reload() …
                                </li>
                                <li>3-history 对象相关操作：back()、forward()、go() …
                                </li>
                                <li>4-navigator 对象相关操作：userAgent 、appName …
                                </li>
                                <li>5-screen 对象相关操作：width 、height
                                </li>
                                <li>6-滚动条位置获取和设置
                                </li>
                                <li>7-scroll 和 resize 事件
                                </li>
                                <li>8-案例：淘宝搜索框吸顶效果
                                </li>
                                <li>9-案例：动画回到顶部效果
                                </li>
                                <li>10-案例：通过 hash 切换的招聘面板
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>17</i>
                                <strong>Event 事件（随心所欲的折腾）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-事件监听器 和 取消事件监听
                                </li>
                                <li>2-事件流：冒泡和捕获
                                </li>
                                <li>3-Event 事件对象详解
                                </li>
                                <li>4-事件源 和 事件代理
                                </li>
                                <li>5-鼠标位置获取
                                </li>
                                <li>6-取消冒泡，mouseenter、mouseleave 和 mousemove事件
                                </li>
                                <li>7-案例：放大镜效果
                                </li>
                                <li>8-浏览器的默认行为 和 取消默认行为
                                </li>
                                <li>9-右键菜单事件 和 自定义右键菜单
                                </li>
                                <li>10-键盘事件
                                </li>
                                <li>11-案例：键盘移动操作图片轮播
                                </li>
                                <li>12-案例：只能输入数字的输入框
                                </li>
                                <li>13-拖拽思路详解
                                </li>
                                <li>14-案例：妙味经典官网弹窗实现
                                </li>
                                <li>15-鼠标滚动事件
                                </li>
                                <li>16-案例：自定义滚动条控件
                                </li>
                                <li>17-碰撞检测及框选
                                </li>
                                <li>18-案例：邮箱的批量操作及拖拽删除
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>18</i>
                                <strong>拖放操作和 FileReader （简化上传流程杀手锏）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-元素的拖放操作
                                </li>
                                <li>2-系统文件的拖放操作
                                </li>
                                <li>3-FileReader 读取文件
                                </li>
                                <li>4-案例：系统文件拖拽显示
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>19</i>
                                <strong>音频、视频操作（做自己专属的音乐播放器）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-audio、video 基本用法
                                </li>
                                <li>2-audio、video 的相关方法
                                </li>
                                <li>3-audio、video 的相关属性
                                </li>
                                <li>4-audio、video 的常用事件
                                </li>
                                <li>5-案例：自定义音乐播放器
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>20</i>
                                <strong>第二阶段实战《百度云盘》</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-根据数据生成三大块视图
                                </li>
                                <li>2-三大视图之间的相互交互
                                </li>
                                <li>3-新建文件夹及文件夹命名规则设置
                                </li>
                                <li>4-文件夹的批量操作，全选、单选和框选
                                </li>
                                <li>5-右键菜单添加
                                </li>
                                <li>6-删除文件夹 和 移动文件夹
                                </li>
                            </ul>
                        </li>
                    </ol>
                    <h3>第三阶段</h3>
                    <ol>
                        <li class="one">
                            <h4>
                                <i>21</i>
                                <strong>面向对象&amp;继承&amp;组件开发</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-面向过程与面向对象
                                </li>
                                <li>2-工厂模式及构造函数
                                </li>
                                <li>3-prototype 原型
                                </li>
                                <li>4-混合构造函数/原型方法
                                </li>
                                <li>5-面向对象编程(OOP)总结
                                </li>
                                <li>6-对象的原型链查找规则
                                </li>
                                <li>7-对象常用操作
                                </li>
                                <li>8-包装对象 是什么意思
                                </li>
                                <li>9-构造函数继承
                                </li>
                                <li>10-原型链继承
                                </li>
                                <li>11-拷贝继承，深拷贝和浅拷贝
                                </li>
                                <li>12-ES6 中的 面向对象：class 、extend 、super
                                </li>
                                <li>13-组件开发：方法、配置、事件
                                </li>
                                <li>14-addEventListener事件机制的实现
                                </li>
                                <li>15-案例：封装拖拽类
                                </li>
                                <li>16-对象的自定义事件使用
                                </li>
                                <li>17-案例：封装自己的工具库（JQuery 核心方法实现）
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>22</i>
                                <strong>ES6 高阶使用</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-数据劫持原理分析
                                </li>
                                <li>2-Symbol
                                </li>
                                <li>3-freeze()、isFrozen()
                                </li>
                                <li>4-getOwnPropertyDescriptor
                                </li>
                                <li>5-Object.defineProperty()
                                </li>
                                <li>6-Proxy
                                </li>
                                <li>7-模块化编程：CMD 规范 和 AMD 规范
                                </li>
                                <li>8-export 和 import
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>23</i>
                                <strong>node.js</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-Node.js 环境搭建
                                </li>
                                <li>2-模块化（CommonJS）
                                </li>
                                <li>3-NPM 包管理工具
                                </li>
                                <li>4-KOA 基础（Application、Context、Request、Response）
                                </li>
                                <li>5-HTTP 协议（请求与响应、头信息、状态码）
                                </li>
                                <li>6-中间件（MiddleWare）
                                </li>
                                <li>7-路由中间件（Koa-Router）
                                </li>
                                <li>8-正文数据解析中间件（Koa-bodyparser）
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>24</i>
                                <strong>客户端信息存储</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-cookie 的操作与封装
                                </li>
                                <li>2-localStorage 和 sessionStorage
                                </li>
                                <li>3-离线存储技术使用
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>25</i>
                                <strong>前后端数据交互及异步操作（后端数据这样玩）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-Ajax 基本步骤
                                </li>
                                <li>2-post 和 get 方法的不同
                                </li>
                                <li>3-封装 Ajax 方法
                                </li>
                                <li>4-案例：登录和注册功能实现
                                </li>
                                <li>5-同源策略 和 跨域
                                </li>
                                <li>6-利用 jsonp 进行跨域请求
                                </li>
                                <li>7-案例：蘑菇街瀑布流图片加载
                                </li>
                                <li>8-Fetch 和 axios
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>26</i>
                                <strong>搞定移动端（手机上玩出花来）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-移动端基础事件 - touch事件
                                </li>
                                <li>2-TouchEvent 对象详解
                                </li>
                                <li>3-案例：移动端滑屏切换的幻灯片
                                </li>
                                <li>4-移动端的多指操作
                                </li>
                                <li>5-Math.atan2() 方位角使用
                                </li>
                                <li>6-移动端的陀螺仪操作
                                </li>
                                <li>7-函数节流和函数防抖
                                </li>
                                <li>8-案例：720度家居装修图
                                </li>
                                <li>9-案例：摇一摇功能实现
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>27</i>
                                <strong>better-scroll（你所见的滑屏，就是这样做的）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-移动端自定义滑屏实现
                                </li>
                                <li>2-案例：手机淘宝幻灯片实现
                                </li>
                                <li>3-案例：仿 iOS 经典选择器控件
                                </li>
                                <li>4-案例：上拉加载和下拉刷新功能实现
                                </li>
                                <li>5-案例：自定义索引列表
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>28</i>
                                <strong>地理信息获取和百度地图 API（当你有了定位能力）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-navigator.geolocation 地理获取相关操作
                                </li>
                                <li>2-百度地图API 基本使用
                                </li>
                                <li>3-案例：行走日记
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>29</i>
                                <strong>探秘《淘宝造物节》类VR场景核心原理</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-图片预加载
                                </li>
                                <li>2-配合三角函数搭建多面柱体
                                </li>
                                <li>3-3D 场景搭建
                                </li>
                                <li>4-利用 CSS3  3D 进行移动端适配
                                </li>
                                <li>5-根据 陀螺仪 进行场景切换
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>30</i>
                                <strong>正则表达式（超严谨的火星文）</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-创建正则表达式
                                </li>
                                <li>2-正则表达式常用方法
                                </li>
                                <li>3-正则表达式 - 分组（子项）
                                </li>
                                <li>4-正则表达式 - 元字符
                                </li>
                                <li>5-正则表达式 - 限定符
                                </li>
                                <li>6-正则表达式 - 边界符
                                </li>
                                <li>7-正则表达式 - 匹配范围
                                </li>
                                <li>8-案例：匹配中文
                                </li>
                                <li>9-案例：匹配QQ号码
                                </li>
                                <li>10-贪婪模式和懒惰模式
                                </li>
                                <li>11-案例：验证邮箱号码
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>31</i>
                                <strong>第三阶段实战《移动端企业网站制作》</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-登录和注册功能
                                </li>
                                <li>2-上滑加载的作品列表
                                </li>
                                <li>3-无缝滑屏的幻灯片功能
                                </li>
                                <li>4-移动端弹窗实现
                                </li>
                                <li>5-作品留言及点赞功能实现
                                </li>
                            </ul>
                        </li>
                    </ol>
                    <h3>第四阶段</h3>
                    <ol>
                        <li class="one">
                            <h4>
                                <i>32</i>
                                <strong>React.js  全家桶</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-React 基础（JSX）
                                </li>
                                <li>2-React 组件（Props、State）
                                </li>
                                <li>3-脚手架使用：create-react-app
                                </li>
                                <li>4-React 组件通信（Event）
                                </li>
                                <li>5-React 组件生命周期（Lifecycle）
                                </li>
                                <li>6-context 和 PropTypes
                                </li>
                                <li>7-React-Router 路由
                                </li>
                                <li>8-Redux、React-Redux 状态管理
                                </li>
                                <li>9-redux-saga
                                </li>
                                <li>10-Redux-Devtools
                                </li>
                                <li>11-Ant Design UI 组件库
                                </li>
                                <li>12-案例：QQ好友列表
                                </li>
                                <li>13-案例：ToDoList
                                </li>
                                <li>14-案例：《CNode 实战》
                                </li>
                            </ul>
                        </li>
                        <l class="one" i>
                                <h4>
                                    <i>33</i>
                                    <strong>webpack</strong>
                                    <em class="listbtn jia"></em>
                                </h4>
                                <ul>
                                    <li>1-模块化回顾
                                    </li>
                                    <li>2-webpack 安装
                                    </li>
                                    <li>3-webpack 基础打包功能与结构分析
                                    </li>
                                    <li>4-webpack 配置
                                    </li>
                                </ul>
                            </l>
                        <li class="one">
                            <h4>
                                <i>34</i>
                                <strong>TypeScript</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-TypeScript 介绍
                                </li>
                                <li>2-TypeScript 环境配置
                                </li>
                                <li>3-TypeScript 编译命令
                                </li>
                                <li>4-TypeScript 类型系统
                                </li>
                                <li>5-TypeScript 接口
                                </li>
                                <li>6-TypeScript 类型深入
                                </li>
                                <li>7-TypeScript 函数
                                </li>
                                <li>8-TypeScript 类
                                </li>
                                <li>9-TypeScript 泛型
                                </li>
                                <li>10-装饰器
                                </li>
                                <li>11-模块系统
                                </li>
                                <li>12-高级主题
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>35</i>
                                <strong>Vue.js</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-Vue 介绍与应用启动
                                </li>
                                <li>2-Vue 基础指令
                                </li>
                                <li>3-Vue 动画与自定义指令
                                </li>
                                <li>4-Vue 组件基础
                                </li>
                                <li>5-Vue 组件深入（组件通信、生命周期）
                                </li>
                                <li>6-Vue 插件与过滤器
                                </li>
                                <li>7-案例：百度音乐
                                </li>
                                <li>8-脚手架使用：Vue-cli
                                </li>
                                <li>9-Vue Loader
                                </li>
                                <li>10-路由：vue-router
                                </li>
                                <li>11-Vuex 状态管理
                                </li>
                                <li>12-Vue Devtools
                                </li>
                                <li>13-案例：任务管理系统
                                </li>
                                <li>14-Element UI 组件库
                                </li>
                                <li>15-案例：美食后台管理系统
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>36</i>
                                <strong>git 版本控制工具</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-git 简介与安装
                                </li>
                                <li>2-工作区、暂存区、仓库
                                </li>
                                <li>3-git 的分支管理
                                </li>
                                <li>4-git 版本控制
                                </li>
                                <li>5-git 远程仓库同步
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>37</i>
                                <strong>面试与就业</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-Promise 源码解析
                                </li>
                                <li>2-事件轮询(Event loop)、宏任务、微任务
                                </li>
                                <li>3-函数式编程、函数柯里化
                                </li>
                                <li>4-JD分析及就业面试准备
                                </li>
                                <li>5-简历编写思路分析
                                </li>
                                <li>6-面试作品准备
                                </li>
                            </ul>
                        </li>
                        <li class="one">
                            <h4>
                                <i>38</i>
                                <strong>课程总结</strong>
                                <em class="listbtn jia"></em>
                            </h4>
                            <ul>
                                <li>1-知识体系回顾
                                </li>
                                <li>2-项目总结回顾
                                </li>
                                <li>3-全栈知识图谱介绍
                                </li>
                                <li>4-职场经验分享
                                </li>
                            </ul>
                        </li>
                    </ol>
                </div>
            </div>
        </div>
        <%--第五个--%>
        <div class="five">
            <div class="five_box">
                <span class="subbtn" title="课程价格7980"></span>
                <h3>
                    <img src="lyimages/title6.png" alt="" /></h3>
                <ul class="clearfix five_box_ul">
                    <li>
                        <img src="lyimages/banner1.png" alt="" /></li>
                    <li>
                        <img src="lyimages/banner2.png" alt="" /></li>
                    <li>
                        <img src="lyimages/banner3.png" alt="" /></li>
                    <li>
                        <img src="lyimages/banner4.png" alt="" /></li>
                </ul>
            </div>
        </div>
        <%--第六个--%>
        <div class="six">
            <div class="six_box">
                <h3>
                    <img src="lyimages/title7.png" /></h3>
                <div class="answerbox">
                    <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;">
                        <ul class="swiper-slide">
                            <li>
                                <h4>
                                    <em>1</em>
                                    远程班学习效果能保证吗？
                                </h4>
                                <p>
                                    远程班的上课模式是采用讲师远程直播+视频教程配合，一起来学习，并且还有专属的班级群，并且为了保证大家在学习课程中遇到问题后如何快速解决，我们专门为每个班都配备了专属的班级助教及班主任，当然讲师也会在群里解答大家的问题的，来全方位的保证大家学习过程中遇到的问题，当然啦您也要努力的学习多敲代码多练习才好哦~~
                                   
                                        <i></i>
                                </p>
                            </li>
                            <li>
                                <h4><em>2</em>4个月的时间能够学完吗？</h4>
                                <p>
                                    我们的课程严格按照课程大纲进行，每一个知识点都详细讲解，只要平时按照讲师的课程进度去做，基本都不会有什么大问题的哦 ；
                                   
                                        <i></i>
                                </p>
                            </li>
                            <li>
                                <h4><em>3</em>加班错过了直播课怎么办？</h4>
                                <p>
                                    开课后每周三节课，都是在八点以后直播，充分考虑到在职学员的下班时间，错过直播我们有回放视频，回放视频不限时观看，只要你想学习，随时均可学习。
                                   
                                        <i></i>
                                </p>
                            </li>
                            <!-- <li>
                                <h4><em>4</em>学完该课程能达到什么水准？</h4>
                                <p>
                                    开课后每周三节课，都是在八点以后直播，充分考虑到在职学员的下班时间，错过直播我们有回放视频，回放视频不限时观看，只要你想学习，随时均可学习。
                                    <i></i>
                                </p>
                            </li> -->
                        </ul>
                    </div>
                    <div class="swiper-scrollbar" style="opacity: 0; transition-duration: 400ms;">
                        <div class="swiper-scrollbar-drag" style="height: 476.339px; transform: translate3d(0px, 0px, 0px); transition-duration: 0ms;"></div>
                    </div>
                </div>
                <a id="callQQ" href="JavaScript:;" class="eight_btn" title="咨询更多"></a>
            </div>
        </div>
        <%--第七个--%>
        <div class="seven">
            <div class="seven_box">
                <h3>
                    <img src="lyimages/title8.png" alt="" /></h3>
                <p>
                    <img src="lyimages/a1.png" alt="" />
                </p>
                <p>
                    <img src="lyimages/a2.png" alt="" />
                </p>
            </div>
        </div>
        <%--  尾部内容--%>
        <div id="weibu">
            <div id="weibu_zhong">
                <div id="weibu_left">
                    <img src="../images/weibumiaowei.jpg" />
                </div>
                <div id="weibu_right">
                    <div id="weibu_right_top">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">课程</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">视频学习</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">尊享视频</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">社区</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">关于我们</a></li>
                            <li class="link-line">|</li>
                            <li><a href="#">常见问题</a></li>

                        </ul>
                    </div>
                    <div id="weibu_right_down">
                        <p>京ICP备08102442号-1 2007-2019 MIAOV.COM 版权所有</p>
                    </div>
                </div>
            </div>
        </div>
    </form>
</body>
</html>
